<template>
    <div>
      <el-table :data="salesList" border style="width: 99%;height:100%">
  
        <el-table-column align="center" fixed width="160">
          <template #header><!--自定义表头-->
            <el-text class="mx-1" type="primary" size="small">项目编号</el-text>
          </template>
          <template #default="scope"><!--自定义列-->
  
            <el-text class="mx-1" type="primary" style="cursor: pointer;" @dblclick="on_skipCode(scope.row.salesCode)"
              size="small">{{ scope.row.salesCode == null ? "无"
                : scope.row.salesCode
              }}</el-text>
  
          </template>
        </el-table-column>
  
        <el-table-column align="center" fixed width="160">
          <template #header><!--自定义表头-->
            <el-text class="mx-1" type="primary" size="small">项目类型</el-text>
          </template>
          <template #default="scope"><!--自定义列-->
            <el-text class="mx-1" size="small">{{ scope.row.projectType == null ? "无" : scope.row.projectType }}</el-text>
  
          </template>
        </el-table-column>
  
  
        <el-table-column align="center" width="160">
          <template #header><!--自定义表头-->
            <el-text class="mx-1" type="primary" size="small">项目名称</el-text>
          </template>
          <template #default="scope"><!--自定义列-->
            {{ scope.row.projectName }}
          </template>
        </el-table-column>
        <el-table-column align="center" width="120">
          <template #header><!--自定义表头-->
            <el-text class="mx-1" type="primary" size="small">客户信息</el-text>
          </template>
          <template #default="scope"><!--自定义列-->
            <el-popover effect="light" trigger="hover" placement="top" width="auto">
              <template #default>
                <div>
                  <el-tag class="mx-1" type="" effect="light" size="small">客&ensp;户&ensp;名&ensp;称&ensp;: </el-tag>
                  <el-tag class="mx-1" type="" effect="light" size="small">{{ scope.row.custName == null ? "无" :
                    scope.row.custName }} </el-tag>
                </div>
                <div>
                  <el-tag class="mx-1" type="" effect="dark" size="small"> 客户联系方式:</el-tag>
                  <el-tag class="mx-1" type="" effect="light" size="small">{{ scope.row.custPhone == null ? "无" :
                    scope.row.custPhone }} </el-tag>
                </div>
                <div>
                  <el-tag class="mx-1" type="success" effect="dark" size="small">客&ensp;户&ensp;地&ensp;址&ensp;: </el-tag>
                  <el-tag class="mx-1" type="success" effect="light" size="small">{{ scope.row.custAddress == null ? "无" :
                    scope.row.custAddress }} </el-tag>
                </div>
              </template>
              <template #reference>
                <el-tag>{{ scope.row.custName == null ? "无名称" : scope.row.custName }}</el-tag>
              </template>
            </el-popover>
          </template>
        </el-table-column>
  
        <el-table-column align="center" sortable width="210" prop="estimatedStartTime">
          <template #header><!--自定义表头-->
            <el-text class="mx-1" type="primary" size="small">预测(启动~结束)时间</el-text>
          </template>
          <template #default="scope"><!--自定义列-->
            {{ scope.row.estimatedStartTime != null ? scope.row.estimatedStartTime.substring(0, 10) : '未定' }}
            ~
            {{ scope.row.estimatedEndTime != null ? scope.row.estimatedEndTime.substring(0, 10) : '未定' }}
          </template>
        </el-table-column>
  
        <el-table-column align="center" sortable prop="estAmount" width="120">
          <template #header><!--自定义表头-->
            <el-text class="mx-1" type="primary" size="small">预测金额</el-text>
            <!-- <el-button :icon="estAmountEX?'Unock':'Lock'"/> -->
            <el-row @click.stop="on_estAmountEX()" style="display:inline-block;">
              <el-icon v-if="estAmountEX">
                <Unlock />
              </el-icon>
              <el-icon v-else>
                <Lock />
              </el-icon>
            </el-row>
          </template>
          <template #default="scope"><!--自定义列-->
            {{ estAmountEX ? (scope.row.estAmount == null ? "" : scope.row.estAmount + '万元') : '***' }}
          </template>
        </el-table-column>
  
  
  
        <el-table-column align="center" sortable prop="isScheme" width="130">
          <template #header><!--自定义表头-->
            <el-text class="mx-1" type="primary" size="small">是否需要方案</el-text>
          </template>
          <template #default="scope"><!--自定义列-->
            {{ scope.row.isScheme ? '是' : '否' }}
          </template>
        </el-table-column>
  
  
        <el-table-column align="center" sortable prop="schemeTime" width="155">
          <template #header><!--自定义表头-->
            <el-text class="mx-1" type="primary" size="small">方案要求提交时间</el-text>
          </template>
          <template #default="scope"><!--自定义列-->
            {{ scope.row.schemeTime != null ? scope.row.schemeTime.substring(0, 10) : '未定' }}
          </template>
        </el-table-column>
  
  
        <el-table-column align="center" sortable prop="schemeActualTimes" width="155">
          <template #header><!--自定义表头-->
            <el-text class="mx-1" type="primary" size="small">方案实际提交时间</el-text>
          </template>
          <template #default="scope"><!--自定义列-->
            {{ scope.row.schemeActualTimes != null ? scope.row.schemeActualTimes.substring(0, 10) : '未定' }}
          </template>
        </el-table-column>
  
  
        <el-table-column align="center" prop="state" width="120">
          <template #header><!--自定义表头-->
            <el-text class="mx-1" type="primary" size="small">订单状态</el-text>
          </template>
          <template #default="scope"><!--自定义列-->
            <el-text v-if="scope.row.state == 1" class="mx-1" type="success">跟踪中</el-text>
            <el-text v-else-if="scope.row.state == 2" class="mx-1" type="danger">丢单</el-text>
            <el-text v-else-if="scope.row.state == 3" class="mx-1" type="info">客户取消</el-text>
            <el-text v-else-if="scope.row.state == 4" class="mx-1" type="primary">已签订</el-text>
            <el-text v-else class="mx-1" type="warning">无状态</el-text>
          </template>
        </el-table-column>
  
        <el-table-column align="center" prop="userName" width="120" fixed="right">
          <template #header><!--自定义表头-->
            <el-text class="mx-1" type="primary" size="small">参与人</el-text>
          </template>
          <template #default="scope"><!--自定义列-->
            {{ scope.row.userName }}
          </template>
        </el-table-column>
  
        <el-table-column align="center" prop="updUserName" width="120" fixed="right">
          <template #header><!--自定义表头-->
            <el-text class="mx-1" type="primary" size="small">当前修改人</el-text>
          </template>
          <template #default="scope"><!--自定义列-->
            {{ scope.row.updUserName }}
          </template>
        </el-table-column>
  
        <el-table-column align="center" sortable prop="createTime" width="120">
          <template #header><!--自定义表头-->
            <el-text class="mx-1" type="primary" size="small">提交时间</el-text>
          </template>
          <template #default="scope"><!--自定义列-->
            {{ scope.row.createTime != null ? scope.row.createTime.substring(0, 10) : '未知' }}
          </template>
        </el-table-column>
  
        <el-table-column align="center" prop="trackingState" width="130">
          <template #header><!--自定义表头-->
            <el-text class="mx-1" type="primary" size="small">跟踪过程刷新</el-text>
          </template>
          <template #default="scope"><!--自定义列-->
            {{ scope.row.trackingState }}
          </template>
        </el-table-column>
  
        <el-table-column align="center" prop="remark" width="155">
          <template #header><!--自定义表头-->
            <el-text class="mx-1" type="primary" size="small">备注</el-text>
          </template>
          <template #default="scope"><!--自定义列-->
            {{ scope.row.remark }}
          </template>
        </el-table-column>
  
        <el-table-column align="center" sortable prop="schemeActualTimes" width="155">
          <template #header><!--自定义表头-->
            <el-text class="mx-1" type="primary" size="small">提交时间</el-text>
          </template>
          <template #default="scope"><!--自定义列-->
            {{ scope.row.schemeActualTimes != null ? scope.row.schemeActualTimes.substring(0, 10) : '未定' }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { computed, ref, reactive, onMounted, watch,defineProps } from 'vue'
  import api from '/@/api/sy/apiERP.js';
  import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router'
  const router = useRouter();
  const props = defineProps(['param']);
  // import { watch } from 'node:fs';
  
  //搜索
  const search = ref({
    salesALL: '',//整体模糊搜索
    projectType: '',//指定项目类型
    state: 0,//指定状态
    strTime: null,
    endTime: null,
    currentPage: 1,
    pageSize: 30,
  })
  
  
  function on_skipCode(val: string) {
    // alert(val)
    // router.push({
    //   path: "/sy/symb",
    //   query: { id: Math.random(), name: "vue-next-admin" },
    // });
    router.push({
      name: "sales_upd",
      params: { salesCode: val},
    });
  }
  
  // 搜索框state和projectType的筛选
  const searchSelect = ref({
    projectType: [
      { label: 'WMS', value: 'WMS', },
      { label: 'MES', value: 'MES', },
      { label: 'AGV', value: 'AGV', },
      { label: 'SCADA', value: 'SCADA', },
      { label: 'SAP', value: 'SAP', },
      { label: '其它', value: '其它', },
      { label: '全部', value: '', },
    ],//指定项目类型
    state: [
      { label: '跟踪中', value: 1, },
      { label: '丢单', value: 2, },
      { label: '客户取消', value: 3, },
      { label: '已签单', value: 4, },
      { label: '全部', value: 0, },
    ],//指定状态
  })
  
  watch(search, (newVal, oldVal) => {
    salesShow()
  }, { deep: true }) // 深层监控
  
  //页数
  let pageSizeMax = ref<number>(0)
  const handleSizeChange = (val: number) => {
    search.value.pageSize = val
    // console.log(`${val} items per page`)
  }
  const handleCurrentChange = (val: number) => {
    search.value.currentPage = val
    // console.log(`current page: ${val}`)
  }
  // 对象类型
  interface interfaceSales {
    salesID: number | null
    salesCode: String | null
    projectType: String | null
    projectName: String | null
    custName: String | null
    custPhone: String | null
    custAddress: String | null
    isScheme: boolean | null
    estAmount: number | null
    estimatedStartTime: Date | null
    estimatedEndTime: Date | null
    schemeTime: Date | null
    trackingState: String | null
    remark: String | null
    userName: String | null
    updUserName: String | null
    state: number | null
    updateTime: Date | null
    createTime: Date | null
  }
  // 数组对象
  let salesList = ref<interfaceSales[]>([])
  
  // 获取数组对象
  function salesShow() {
    api.post('public/sales/salesShow', search.value).then((response: any) => {
      // 处理服务器返回的响应
      salesList.value = response.data.data.salesList
      pageSizeMax.value = response.data.data.pageSizeMax
      console.log(salesList);
  
  
    })
      .catch((error: any) => {
        //console.log(error);
        // 处理错误
      })
      .finally(() => {
  
      })
  
      ;
  }
  
  
  // 金额显示与隐藏
  const estAmountEX = ref(false)
  function on_estAmountEX() {
    estAmountEX.value = !estAmountEX.value
    // console.log(estAmountEX);
  
  }
  
  onMounted(() => {
     
    salesShow()
    // 在这里写逻辑
  });
  
  </script>
  